<!--
 * @Author: your name
 * @Date: 2021-04-17 14:29:42
 * @LastEditTime: 2021-04-20 20:34:05
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \智慧医疗项目\app\src\views\pages\production\classify\classify.vue
-->
<template>
  <div class="classify">
    <!-- 面包导航 -->
    <div class="header">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item to="">商品管理</el-breadcrumb-item>
        <el-breadcrumb-item>商品分类</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="main">
      <div class="top">
        <div class="left">
          <!-- 新增按钮 -->
          <el-button size="small" @click="addClassify">新增分类</el-button>
        </div>
        <div class="right">
          <!-- 商品分类选择器 -->
          <div class="select">
            <span>商品分类</span>
            <el-select v-model="value" size="small" placeholder="请选择" @change="changeSelect()">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
          <!-- 搜索商品分类 -->
          <div class="search">
            <el-input type='text' size="small" placeholder="请输入要搜索的分类" v-model="iptVal" @input="changeSearch"></el-input>
            <el-button size="small">搜索</el-button>
          </div>
        </div>
      </div>
      <div class="table">
        <!-- 表格 -->
        <el-table
          :data='tableData'
          ref="multipleTable"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column type="index" label="序号" width="120"></el-table-column>
          <el-table-column prop="type" label="商品分类" width="200"></el-table-column>
          <el-table-column prop="typeImg" label="分类展示图片" width="180">
            <template slot-scope="scope">
              <img :src="scope.row.typeImg" alt="">
            </template>
          </el-table-column>
          <el-table-column prop="count" label="库存数量" width="160"></el-table-column>
          <el-table-column prop="type" label="状态" width="160">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.status"
                active-color="#13ce66"
                inactive-color="#ff4949">
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200">
            <template slot-scope="scope">
              <el-button type="text" @click="edit(scope.row)">编辑</el-button>
              <el-button type="text" @click="delClassify(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 新增分类弹框 -->
      <el-dialog :title="isEdit?'编辑分类':'新增分类'" :visible.sync="dialogFormVisible">
        <el-form :model="form" ref="formNode">
          <el-form-item label="分类名称" :label-width="formLabelWidth">
            <el-input v-model="form.type" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="图片上传" :label-width="formLabelWidth" v-if="!isEdit">
            <el-upload
              class="upload-demo"
              action="https://jsonplaceholder.typicode.com/posts/"
              :on-change="changeImg(tip)"
              :file-list="fileList"
              list-type="picture">
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
          </el-form-item>
          <el-form-item label="是否显示" :label-width="formLabelWidth" v-if="!isEdit">
            <template>
              <el-radio v-model="status" :label='true'>是</el-radio>
              <el-radio v-model="status" :label='false'>否</el-radio>
            </template>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancelDialog">取 消</el-button>
          <el-button type="primary" @click="okDialog">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <div class="footer"></div>
  </div>
</template>

<script>
import axios from '../../../../utils/request'
export default {
  data() {
    return {
      fileList: [],
      multipleTable: [],
      options: [{
        value: '请选择',
        label: '请选择'
      }, {
        value: '理疗仪器',
        label: '理疗仪器'
      }, {
        value: '健康保险',
        label: '健康保险'
      }, {
        value: '婴幼用品',
        label: '婴幼用品'
      }],
      value: '',
      iptVal: '',
      tableData: [],
      dialogFormVisible: false,
      form: {
        type: '',
      },
      status: false,
      formLabelWidth: '120px',
      renderList: [],
      isEdit: true,
      typeId: 0,
    }
  },
  mounted() {
    this.getProClassify()
  },
  methods: {
    //请求分类数据
    async getProClassify() {
      const { data: res } = await axios.get('/api/proClassify')
      if(res.code !== 0) {
        this.$message.error('获取失败')
        return
      }
      this.tableData = res.data
      this.renderList = res.data
      this.$message.success('获取成功')
    },
    //选择
    changeSelect() {
      // console.log(this.value)
      this.tableData = this.value !=='请选择'&&this.renderList.filter(item => item.type.includes(this.value))||this.renderList
    },
    //搜索
    changeSearch() {
      this.tableData = this.iptVal !=='' && this.renderList.filter(item => item.type.includes(this.iptVal))||this.renderList
    },
    //新增分类
    addClassify() {
      this.dialogFormVisible = true
      this.isEdit = false
    },
    //编辑分类
    edit(message) {
      this.dialogFormVisible = true
      console.log(message)
      this.isEdit = true
      this.form = message
      this.typeId = message.typeId
    },
    //上传图片
    changeImg() {
      this.fileList.push({
        name: 'typeImg',
        url: '../../../../assets/logo.png'
      })
    },
    //取消弹框
    cancelDialog() {
      this.dialogFormVisible = false
      this.tableData = this.renderList
      this.form = {}
    },
    //确认弹框
    okDialog() {
      if(this.isEdit) {
        this.tableData.forEach(item => {
          if(item.typeId === this.typeId) {
            item.type = this.form.type
          }
        })
      }else {
        this.tableData.push({
          type: this.form.type,
          typeId: 'typeid1',
          typeImg: this.fileList[0],
          count: '3823',
          status: this.status,
        })
        console.log(this.fileList)
      }
      this.dialogFormVisible = false
    },
    //删除分类
    delClassify(row) {
      this.tableData = this.tableData.filter(item => item.typeId !== row.typeId)
    }
  }
};
</script>

<style lang='scss' scoped>
.classify {
  width: 100%;
  height: 100%;
}
.header {
  width: 100%;
  height: 36px;
  border-bottom: 2px solid skyblue;
}
.main {
  width: 100%;
  .top {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .top .el-button {
    color: skyblue;
    border: 1px solid skyblue;
  }
  .right {
    display: flex;
  }
  .search {
    display: flex;
    padding-left: 10px;
  }
  .search .el-input {
    padding-right: 10px;
  }
  .select span {
    font-size: 14px;
    padding-right: 10px;
  }
  .table {
    width: 100%;
  }
}
</style>